@import "../theming/theming";
@import "button";
@import "../elevation/elevation";

@mixin lgn-button-theme() {
  @include lgn-button-color();
}

@mixin lgn-button-color() {
  .lgn-button,
  .lgn-stroked-button,
  .lgn-icon-button {
    color: inherit;
    background: transparent;

    @include _lgn-button-theme-color(false);
  }

  .lgn-stroked-button:hover,
  .lgn-stroked-button:focus {
    background: var(--zitadel-color-stroked-button-hover-background);
  }

  .lgn-stroked-button:active {
    background: var(--zitadel-color-stroked-button-active-background);
  }

  .lgn-button:focus,
  .lgn-raised-button:focus {
    @include lgn-button-elevation(5);
    background: var(--zitadel-color-background);
  }

  .lgn-stroked-button:not([disabled]) {
    border-color: var(--zitadel-color-divider);
  }

  .lgn-button {
    @include _lgn-button-theme-color(false);
    &:hover {
      background-color: rgba(var(--zitadel-color-primary-rgb), 0.1);
    }

    &:focus {
      background-color: rgba(var(--zitadel-color-primary-rgb), 0.2);
    }

    &:active {
      background-color: rgba(var(--zitadel-color-primary-rgb), 0.25);
    }
  }

  .lgn-raised-button {
    color: var(--zitadel-color-text);
    background-color: var(--zitadel-color-raised-button-background);

    @include _lgn-button-theme-color(true);
    @include _lgn-button-theme-background-color();

    &:active {
      background-color: var(--zitadel-color-raised-button-active-background);
    }
  }

  .lgn-button,
  .lgn-stroked-button {
    @include lgn-button-elevation(0);
  }

  .lgn-raised-button {
    @include lgn-button-elevation(2);

    &:not([disabled]):active {
      @include lgn-button-elevation(5);
    }

    // &:focus {
    //     @include lgn-b-elevation(8, $config);
    // }

    &[disabled] {
      @include lgn-button-elevation(0);
    }
  }
}

@mixin _lgn-button-theme-color() {
  &.lgn-primary {
    color: var(--zitadel-color-primary);
  }
  &.lgn-accent {
    color: var(--zitadel-color-primary);
  }
  &.lgn-warn {
    color: var(--zitadel-color-warn);
  }

  &.lgn-primary,
  &.lgn-accent,
  &.lgn-warn,
  &[disabled] {
    &[disabled] {
      color: var(--zitadel-color-button-disabled);
    }
  }
}

@mixin _lgn-button-theme-background-color() {
  &.lgn-primary {
    background-color: var(--zitadel-color-primary);
  }
  &.lgn-accent {
    background-color: var(--zitadel-color-primary);
  }
  &.lgn-warn {
    background-color: var(--zitadel-color-warn);
  }

  &.lgn-primary,
  &.lgn-accent,
  &.lgn-warn,
  &[disabled] {
    &[disabled] {
      background-color: var(--zitadel-color-button-disabled-background);
    }
  }
}

@mixin _lgn-button-theme-color($contrast) {
  $color: if(
    $contrast,
    var(--zitadel-color-primary-contrast),
    var(--zitadel-color-primary)
  );

  &.lgn-primary {
    color: $color;
  }
  &.lgn-accent {
    color: $color;
  }
  &.lgn-warn {
    color: $color;
  }

  &.lgn-primary,
  &.lgn-accent,
  &.lgn-warn,
  &[disabled] {
    &[disabled] {
      color: var(--zitadel-color-button-disabled);
    }
  }
}

@mixin _lgn-button-theme-background-color() {
  &.lgn-primary {
    background-color: var(--zitadel-color-primary);
  }
  &.lgn-accent {
    background-color: var(--zitadel-color-primary);
  }
  &.lgn-warn {
    background-color: var(--zitadel-color-primary);
  }

  &.lgn-primary,
  &.lgn-accent,
  &.lgn-warn,
  &[disabled] {
    &[disabled] {
      background-color: var(--zitadel-color-button-disabled-background);
    }
  }
}

@mixin _lgn-button-focus-overlay-color() {
  &.lgn-primary:focus {
    background-color: var(--zitadel-color-primary);
  }

  &.lgn-accent:focus {
    background-color: var(--zitadel-color-primary);
  }

  &.lgn-warn:focus {
    background-color: var(--zitadel-color-warn);
  }
}

@mixin lgn-button-elevation($zValue, $opacity: $lgn-elevation-opacity) {
  @include lgn-elevation($zValue, rgb(0, 0, 0), $opacity);
}
